<template>
	<view class="content">
		<view class="price-box">
			<view class="title"></view>
			<view class="price-cont flexWarpCenterColumn">
				<view>支付金额</view>
				<view class="price">¥ {{price||"0"}}</view>
			</view>
		</view>
		<view class="code-box">
			<yz-qr class="code-img" :qrPath.sync="qrPath" :text="qr_code" :size="size" :quality="quality"
				:colorDark="colorDark" :colorLight="colorLight"></yz-qr>
		</view>
		<view class="finish" @tap="directFinish()">无需付款，直接结束订单</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id: "",
				price: "",
				qr_code: "",
				qrPath: '',
				size: 200,
				quality: 'L',
				colorDark: '#000000',
				colorLight: '#ffffff',
				timer: null,
				paymentStatus:0,
				orderInfo:{}
			};
		},
		onLoad(ops) {
			this.order_id = ops.order_id
			this.orderSettlement();
			this.orderDetails();
			this.setTime();
		},
		onUnload() {
			clearInterval(this.timer);
			this.timer = null;
		},
		methods: {
			orderSettlement() {
				this.$request.post(this.$api.orderSettlement, {
					order_id: this.order_id,
					type: 1
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						let {
							data
						} = res
						this.price = data.price
						this.qr_code = data.qr_code
					}
				})
			},
			directFinish(){
				uni.showModal({
					title: '提示',
					content:"是否直接结束订单",
					success: (res) => {
						this.$request.post(this.$api.directFinish, {
							order_id:this.order_id,
							store_id:uni.getStorageSync('store_id'),
							equipment_id:this.orderInfo.store_equipment_id
						}, {
							token:true
						}).then(res => {
							if (res.code == 1) {
								let {
									data = {}
								} = res;
								this.$tools.showToast('结束成功');
								var pages = getCurrentPages();//当前页
								var beforePage = pages[pages.length - 2];//上个页面
								beforePage.$vm.orderDetails();
								setTimeout(()=>{
									uni.navigateBack({
										delta:1
									})
								},1000)
							}
						})
					}
				});
			},
			orderDetails(){
				this.$request.post(this.$api.orderDetails, {
					order_id:this.order_id
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						let {data}=res
						this.orderInfo=data
						this.paymentStatus=data.payment_status
						if(this.paymentStatus==1){
							clearInterval(this.timer);
							this.timer = null;
							uni.showModal({
								title:'提示',
								content:'客户已完成支付',
								success: (res) => {
									var pages = getCurrentPages();//当前页
									var beforePage = pages[pages.length - 2];//上个页面
									beforePage.$vm.orderDetails();
									setTimeout(()=>{
										uni.navigateBack({
											delta:1
										})
									},1000)
								}
							})
						}
					}
				})
			},
			setTime() {
				let that = this
				// 倒计时
				if (!that.timer) {
					that.timer = setInterval(() => {
						that.orderDetails();
					},3000)
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 40upx;
	}

	.price-box {
		.title {
			height: 50rpx;
			background: url('../../static/index/titlebg.png') no-repeat center/100% 100%;
		}

		.price-cont {
			height: 174rpx;
			width: 628rpx;
			font-size: 36rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #62617D;
			margin: auto;
			background: url('../../static/index/codebg.png') no-repeat center/100% 100%;
			margin-top: -18rpx;
			padding-top: 38rpx;

			.price {
				font-size: 60rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #EB4242;
			}
		}
	}

	.code-box {
		width: 628rpx;
		height: 628rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: auto;
		margin-top: 4rpx;
		position: relative;

		.code-img {
			width: 460rpx;
			height: 460rpx;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}
	}
	.finish{
		color: #26BCFD;
		text-align: center;
		margin-top: 50upx;
	}
</style>
